<template>
    <MenuPage 
        ref="menuPage"
        :columns="columns" 
        :data="data"
        :total="total"
        :page.sync="query.pageIndex"
        :size.sync="query.pageSize"
        :query="query"
        :selection.sync="selection"
        :disabled="(data => data.creator !== userId || data.contentManageVOList.length > 0)"
        showSelectTag
        @add="showEditModal"
        @queryFun="queryList">
        <template slot="button">
            <Poptip
                transfer
                confirm
                title="确定要删除选中的项目吗？"
                placement="left"
                :disabled="selection.length === 0"
                @on-ok="batchDelProject"
            >
                <Button
                type="error"
                :disabled="selection.length === 0"
                >批量删除</Button
                >
            </Poptip>
        </template>
        <template slot="content">
            <div class="filter-wrap">
                <!-- <tag-select
                        title="方向"
                        :current="query.direction"
                        :data="kyTypeArr"
                        @on-change="changeDirection"
                    ></tag-select>
                    <Divider style="margin:15px 0px" /> -->
                <tag-select
                    title="类型"
                    :current="query.typeCode"
                    ref="directionType"
                    :data="kyTypeArr"
                    @on-change="changeType"
                ></tag-select>
                <Divider style="margin: 15px 0px" />
            </div>
        </template>
        <!-- 创建 / 修改 -->
        <EditModal ref="editModal" :type="type" :formData="formData" :title="pageBtnTxt" @ok="handleOk"></EditModal>
        <DetailModal ref="detailModal" :columns="columns"></DetailModal>
        <!-- 模板选择 -->
        <!-- <EnvironDesignModal ref="environDesignModal" @ok="search"></EnvironDesignModal> -->
    </MenuPage>
</template>
<script>
import EditModal from './edit.vue';
import DetailModal from '../detail';
import TagSelect from '@/components/tagSelect/tagSelect';
import { mapGetters, mapState, mapMutations } from 'vuex';
import { queryProject, delProject, batchDelProject } from '../api/projectManage.js';
// import { typeAndDirectionMixin } from '@/mixin/study';
// import EnvironDesignModal from '../design/environDesign.vue';
// import { typeRecordMixin, kyTypeMixin } from '../mixin/research';
import { formDataMixin } from './formData.js'
import pageTitle from '@/mixin/pageTitle';
export default {
    name: 'ResearchList',
    props: {
        type: {
            type: String,
            default: 'apply',
        }
    },
    components: { EditModal,TagSelect,DetailModal }, // TagSelect ,EnvironDesignModal
    mixins: [pageTitle, formDataMixin],//kyTypeMixin,typeRecordMixin,  
    data() {
        return {
            loading:false,
            query: {
                pageIndex: 1,
                pageSize: 10,
                typeCode: 'All',
            },
            selection:[],
            columns: [
                {
                    type:'selection',
                    width:60
                },
                {
                    title: '项目编号',
                    key: 'serial',
                    placement: 'top-left',
                    width: 200,
                    tooltip: true,
                    queryForm:{
                        component:'Input'
                    }
                },
                {
                    type:'link',
                    title: '项目名称',
                    key: 'name',
                    placement: 'top-left',
                    width: 200,
                    tooltip: true,
                    fun:this.showDetailModal,
                    queryForm:{
                        component:'Input'
                    }
                },
                {
                    title: '项目类别',
                    key: 'typeCode',
                    render: (h, { row: { typeCode } }) => {
                        return h('span', this.handleCodeType(typeCode));
                    },
                    placement: 'top-left',
                },
                {
                    title: '重点项目',
                    key: 'emphasis',
                    render: (h, { row: { emphasis } }) => {
                        return h('span', {
                            style:{
                                color:emphasis ? 'var(--status-yes)' : 'var(--status-no)'
                            }
                        },emphasis ? '是' : '否');
                    },
                    placement: 'top-left',
                },
                {
                    title:'科研数量',
                    key:'contentManageVOList',
                    render:(h,params) => {
                        return h('Tag',{
                            props:{
                                color:'var(--url-color)',
                                type:'border'
                            },
                            style:{
                                cursor:'pointer!important',
                            },
                            nativeOn:{
                                click:(e) => {
                                    params.row.contentManageVOList.length > 0 && this.$router.push({
                                        name:'researchDesign',
                                        params:{
                                            xmId:params.row.id
                                        }
                                    })
                                }
                            }
                        },params.row.contentManageVOList ? params.row.contentManageVOList.length : 0) 
                    }
                },
                {
                    title:'经费（万元）',
                    key:'expenditure',
                    tooltip:true,
                    show:false
                },
                {
                    title:"合作形式",
                    key:'forms',
                    tooltip:true,
                    show:false
                },
                {
                    title:"项目来源",
                    key:'source',
                    tooltip:true,
                    show:false,
                    filter:(source) => {
                        return this.getNameById(source,this.kySourceArr)
                    }
                },
                {
                    title:'开始时间',
                    key:'startTime',
                    tooltip:true,
                    show:false
                },
                {
                    title:'结束时间',
                    key:'endTime',
                    tooltip:true,
                    show:false
                },
                {
                    title:'封面图片',
                    key:'iconPath',
                    show:false,
                    render:(h,params) => {
                        return h('img',{
                            attrs:{
                                src:params.row.iconPath ? `/Learn/${params.row.iconPath}` : ''
                            },
                            style:{
                                'max-height':'40px',
                                'vertical-align':'middle'
                                // 'cursor':dis ? '' : 'zoom-in'
                            },
                            // on:{
                            //     error:(e) => {
                            //         params.row.picUrl = this.defImg
                            //         e.target.style.maxHeight = '100%';
                            //         e.target.style.cursor = '';
                            //         return this.setDefImg(e)
                            //     },
                            //     click:(e) => {
                            //         if(dis || params.row.dis || e.target.style.maxHeight === '100%'){
                            //             return
                            //         }
                            //         this.$refs.detailModal.showModal(e)
                            //     }
                            // }
                        })
                    }
                },
                {
                    title: '描述',
                    key: 'description',
                    tooltip:true
                },
                {
                    title: '创建人',
                    key: 'creatorName',
                    width: 100,
                    tooltip: true
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    width: 100,
                    tooltip: true,
                    queryForm:{
                        component:'FormDatepicker',
                        key:'time'
                    }
                },
                {
                    title: '操作',
                    placement: 'top-right',
                    key:'action',
                    width:120,
                    opList:[
                        {
                            txt:'修改',
                            disabled: (data) => data.creator !== this.userId,
                            fun:this.showEditModal
                        },
                        {
                            txt:'删除',
                            type:'delete',
                            disabled: (data) => data.creator !== this.userId || data.contentManageVOList.length > 0,
                            tooltip:true,
                            title: '你确定要删除吗?',
                            fun:this.delItem
                        }
                    ]
                }
            ],
            data: [],
            total: 0
        };
    },
    computed: {
        ...mapState('user', ['userId', 'isRootDesigner'])
    },
    watch: {
        
    },
    mounted() {
        // this.queryTypeRecordAll();
        this.getKyType();
        this.queryList();
        this.getKySource();
        this.getCompanyUserList();
    },
    methods: {
        queryList() {
            let query = { ...this.query };
            let typeCode = this.query.typeCode ? this.query.typeCode : this.query.direction;
            let params = {
                ...query,
                typeCode: typeCode === 'All' ? '' : typeCode,
                // status: 0,
                // creator: this.userId //this.query.creator ? this.userId : '',
            };
            if(query.time && query.time.length > 0){
                params.startTime = query.time[0]
                params.endTime = query.time[1]
                delete params.time
            }
            this.queryObj = JSON.stringify({ ...query, page: this.$route.name });
            queryProject(params).then((res) => {
                if (res.code == 1) {
                    const data = res.data.items;
                    this.data = data;;
                    this.total = res.data.total;;
                }
            }).finally(() => {
                
            });
        },
        changeDirection(type) {
            this.query.direction = type;
            this.filterTypeWithDirection(type);
            this.query.type = 'All';
            this.$refs.directionType && this.$refs.directionType.updateHeight();
            this.queryList();
        },
        changeType(type) {
            this.query.typeCode = type;
            this.queryList();
        },
        refresh() {
            this.query = {...this._query,pageSize:this.query.pageSize,direction: 'All',typeCode: 'All'}
            this.queryList();
        },
        handleOk(op) {
            op === 'add' ? this.refresh() : this.queryList();
        },
        delItem(params) {
            delProject(params.id).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    if(this.query.pageIndex > 1 && this.data.length == 1){
                        this.query.pageIndex --;
                    }
                    this.selection.splice(this.data.findIndex(item => item.id === params.id),1);
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        batchDelProject(){
            let delIds = this.selection.map(item => item.id);
            delProject(delIds).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    if(this.query.pageIndex > 1 && delIds.length === this.data.length){
                        this.query.pageIndex --;
                    }
                    this.selection = [];
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        showEditModal(data) {
            this.$refs.editModal.showModal(data);
        },
        showDetailModal(detail){
            this.$refs.detailModal.showModal(detail);
        },
        showEnvironDesignModal(data) {
            this.$refs.environDesignModal.openDesignModal(data);
        },
    },
    beforeDestroy() {},
};
</script>

<style scoped>
.filter-wrap {
    font-size: 14px;
    color: var(--table-tr-hover-color);
}
</style>
